import type { FC } from 'react';
import { useMemoizedFn } from 'ahooks';
import { useRouter, } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { Text, View, Image } from 'react-native';
import { Button, Space, PageWrapper } from '@/components';
import styles from './styles';

const AppMain: FC = () => {
  const router = useRouter();

  const onLogin = useMemoizedFn(() => {
    router.push('/signin');
  });

  const onRegister = useMemoizedFn(() => {
    router.push('/signup');
  });

  return (
    <PageWrapper
      linearGradient
      showHeader={false}
    >
      <StatusBar style="light" />
      <View style={styles.container}>
        <Image
          style={styles.splash_icon}
          source={require('@/assets/images/splash-icon.png')}
        />
        <View style={styles.header}>
          <Text style={styles.title}>White clouds</Text>
          <Text style={styles.sub_title}>What's up?</Text>
        </View>
        <Space
          direction="vertical"
          style={styles.buttons}
        >
          <Button
            round
            title="Create account"
            type="primary"
            onPress={onRegister}
          />
          <Button
            round
            title="Log in"
            onPress={onLogin}
          />
        </Space>
      </View>
    </PageWrapper>
  );
}

export default AppMain;